<template>
  <el-table :data="lableData" border style="width: 100%">
    <el-table-column label="Date">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <timer />
          </el-icon>
          <span style="margin-left: 10px">{{
            dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm')
          }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column prop="labelName" label="标签名" />
    <el-table-column prop="articleCount" label="图书量" />

    <el-table-column label="操作" width="80">
      <template #default="scope">
        <el-popconfirm
          v-if="scope.row.labelName !== '草稿'"
          title="确定删除吗?"
          @confirm="handleDelete(scope.$index, scope.row)"
        >
          <template #reference>
            <el-button size="small" type="danger">删除</el-button>
          </template>
        </el-popconfirm>
        <el-tag v-else>默认</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { Timer } from '@element-plus/icons-vue'
import { defineProps, inject } from 'vue'
import dayjs from 'dayjs'
import { deleteLable } from '@/utils/articleHttp'
import { ElMessage } from 'element-plus'
interface User {
  _id: string
  createTime: string
  labelName: string
  articleCount: string
}
// 传入删除的方法
const store: any = inject('store')
// 父元素传来的数据
const props = defineProps({
  lableData: {
    default: [] as any[],
  },
})

// 删除
const handleDelete = (index: number, row: User) => {
  deleteLable(row._id)
    .then((res) => {
      if (res.data.ok) {
        store.deleteLableData(index)
        ElMessage.success(res.data.info)
      } else ElMessage.error(res.data.info)
    })
    .catch((err) => ElMessage.error('服务器错误检查token'))
}
</script>
